<!--
 * @Author: hl
 * @Date: 2023-07-11 13:52:31
 * @LastEditors: lh
 * @LastEditTime: 2023-10-20 17:35:16
-->
<template>
  <div>
    <!-- :searchDataList="searchDataListJy" -->
    <tabCom
      ref="tabCombox"
      @Refresh="Refresh"
      @search-callback="searchCallback"
      :title="'已提交审批'"
      :operation-api="operationApiA"
      :table-data-rule="tableDataRuleA"
      :search-data-list="searchDataListJy"
      :needPagination="true"
      :update_show_key="'id'"
      :update_show_value="[0]"
      :formDataWidth="'30%'"
      :updateShow="false"
      :isAddArr="false"
      :isAddAjaxData="true"
      :addAjaxData="{ leaveStatus: 1 }"
      :isShowDownLoadFile="false"
      :showSearch="false"
      :addButtonList="addButtonList"
      @buttonMoudle="examineFn"
    >
      <template #add="{ formData }">
        <el-form-item :label="item.title" v-for="(item, index) in searchDataListJyEdit" :key="index">
          <el-input v-if="!item.type" v-model="formData[item.name]" placeholder="请输入" />
          <template v-else-if="item.type == 'myuser'">
            <el-input :value="userStore.username" disabled />
            <el-input :value="userStore.rolesName" disabled style="margin-top: 10px" />
          </template>
          <personnel v-model="formData[item.name]" v-else-if="item.type == 'user'"></personnel>
          <el-input
            v-else-if="item.type == 'number'"
            type="number"
            v-model="formData[item.name]"
            placeholder="请输入"
          />
          <!-- value-format="YYYY/MM/DD" -->
          <el-date-picker
            v-else-if="item.type == 'timeday'"
            v-model="formData[item.name]"
            type="date"
            format="YYYY/MM/DD"
            placeholder="请选择"
          />
          <el-date-picker
            v-else-if="item.type == 'datetime'"
            v-model="formData[item.name]"
            type="datetime"
            format="YYYY/MM/DD HH:mm:ss"
            placeholder="请选择"
          />
          <upfilebox
            v-else-if="item.type == 'file'"
            fileType="file"
            v-model="formData[item.name]"
            v-model:name="formData[item.prop]"
          ></upfilebox>
          <el-date-picker
            @change="chooseTimeChange(formData[item.name])"
            v-else-if="item.type == 'time'"
            v-model="formData[item.name]"
            type="datetimerange"
            format="YYYY/MM/DD"
            value-format="YYYYMMDD"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
          <el-select
            v-else-if="item.type == 'select' && item!.list!.length > 0"
            v-model="formData[item.name]"
            default-first-option
            :reserve-keyword="false"
            clearable
            allow-create
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="items in item.list"
              :key="items.value"
              :label="items.label || items.name"
              :value="items.value || items.id"
            />
          </el-select>
          <el-select
            v-else-if="item.type == 'selectLable'"
            v-model="formData[item.name]"
            default-first-option
            :reserve-keyword="false"
            clearable
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="items in item.list"
              :key="items.value"
              :label="items.label || items.name"
              :value="items.label || items.name"
            />
          </el-select>
          <el-select
            v-else-if="item.type == 'multipleSelect'"
            multiple
            v-model="formData[item.name]"
            default-first-option
            :reserve-keyword="false"
            clearable
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="items in item.list"
              :key="items.value"
              :label="items.label || items.name"
              :value="items.label || items.name"
            />
          </el-select>
        </el-form-item>
      </template>
    </tabCom>
    <el-dialog v-model="dialogVisible" title="填写销假" width="30%" :before-close="handleClose">
      <el-form ref="ruleFormRef" label-width="120px" class="demo-ruleForm" status-icon>
        <el-form-item label="姓名" prop="desc">
          <el-input v-model="tableDataRow.userName" disabled />
        </el-form-item>
        <el-form-item label="请假类型" prop="desc">
          <el-input v-model="tableDataRow.leaveType" disabled />
        </el-form-item>
        <el-form-item label="请假原因" prop="desc">
          <el-input v-model="tableDataRow.staffSignature" type="textarea" disabled />
        </el-form-item>
        <el-form-item label="销假时间" prop="resource">
          <el-date-picker
            v-model="ruleForm.reportingTime"
            type="datetime"
            format="YYYY/MM/DD HH:mm:ss"
            placeholder="请选择"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="isAgreewithFn(2)">取消</el-button>
          <el-button type="primary" @click="isAgreewithFn(1)"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import tabCom from "@/components/table/indexcopy.vue"
// import { gethomeStatistics } from "@/api/home/index"
import { ref, onMounted, reactive } from "vue"
import upfilebox from "@/components/table/upfile.vue"
import { useUserStore } from "@/store/modules/user"
import { ElMessageBox, ElMessage } from "element-plus"
import { staffWriteReportingTime } from "@/api/leaveapp"

const userStore = useUserStore() // 用户信息

let tabCombox = ref<typeof tabCom>()

onMounted(() => {
  init()
})
// 时间选择限定范围
const chooseTimeChange = (time: any) => {
  const starTime = JSON.parse(JSON.stringify(time[0]))
  const endTime = JSON.parse(JSON.stringify(time[1]))
  const minTime = new Date(insertStr(insertStr(starTime, 4, "-"), 7, "-")).getTime()
  const maxTime = new Date(insertStr(insertStr(endTime, 4, "-"), 7, "-")).getTime()
  const allow = 2592000000 //30天
  if (maxTime - minTime > allow) {
    ElMessage.warning("选择范围请在30天以内!")
    chaxunState.value = false
  } else {
    chaxunState.value = true
  }
}
// 接口请求配置
const operationApiA = ref<any>([
  { type: "add", interface: "/staffLeave/createLeave" },
  { type: "search", interface: "/staffLeave/selectMySubmitAll" },
  { type: "update", interface: "/staffLeave/insertOrUpdate" },
  { type: "delete", interface: "/staffLeave/deleteByIds" }
])

// 新增按钮配置
const addButtonList = ref<addType[]>([
  { type: "examineFn", name: "填写销假时间" },
  { type: "reedit", name: "重新编辑" }
])

// 搜索配置
const searchDataListJy = [{ name: "id", title: "id" }]
// 添加配置
const searchDataListJyEdit = [
  { name: "department", title: "部门", value: "1111" },
  { name: "projectName", title: "项目名称" },
  { name: "programmeName", title: "申请人	", type: "myuser" },
  {
    name: "leaveType",
    title: "请假类型",
    type: "select",
    list: [
      { value: "年假", label: "年假", name: "年假", id: 0 },
      { value: "事假", label: "事假", name: "事假", id: 1 },
      { value: "调休假", label: "调休假", name: "调休假", id: 2 },
      { value: "婚假", label: "婚假", name: "婚假", id: 3 },
      { value: "产假", label: "产假", name: "产假", id: 4 },
      { value: "陪产假", label: "陪产假", name: "陪产假", id: 5 },
      { value: "哺乳假", label: "哺乳假", name: "哺乳假", id: 6 },
      { value: "丧假", label: "丧假", name: "丧假", id: 7 }
    ]
  },
  { name: "leaveReason", title: "请假原因" },
  { name: "accumulatedOvertimeDays", title: "累计加班天数" },
  { name: "restDays", title: "已调休/轮休天数" },
  { name: "residueRestDays", title: "剩余可调休/轮休天数" },
  { name: "leaveStartTime", title: "请假开始时间", type: "datetime" },
  { name: "leaveEndTime", title: "请假结束时间", type: "datetime" },
  { name: "staffSignature", title: "员工签字" },
  { name: "internalOrganizationUserId", title: "内设机构审批人用户", type: "user" },
  { name: "departmentUserId", title: "部门总监用户", type: "user" }
]
// 表单配置
const tableDataRuleA = ref([
  { prop: "id", label: "id" },
  { prop: "leaveType", label: "请假类型" },
  { prop: "leaveReason", label: "请假原因" },
  {
    prop: "leaveStatus",
    label: "请假状态",
    type: "select",
    list: [
      { value: 0, label: "编辑", name: "编辑", id: 0 },
      { value: 1, label: "内设机构待同意", name: "内设机构待同意", id: 1 },
      { value: 2, label: "部门总监待同意", name: "部门总监待同意", id: 2 },
      { value: 3, label: "待填销假时间", name: "待填销假时间", id: 3 },
      { value: 4, label: "待审核并批准销假", name: "待审核并批准销假", id: 4 },
      { value: 5, label: "审核并批准同意", name: "审核并批准同意", id: 5 },
      { value: 6, label: "驳回", name: "驳回", id: 6 }
    ]
  },
  { prop: "projectName", label: "项目名称	" },
  { prop: "leaveStartTime", label: "请假时间", type: "time" },
  { prop: "reportingTime", label: "销假时间", type: "time" },
  { prop: "internalOrganizationUserName", label: "内设机构审批人" },
  { prop: "internalOrganizationOpinion", label: "内设机构意见" },
  { prop: "departmentUserName", label: "部门总监" },
  { prop: "departmentOpinion", label: "部门意见" },
  { prop: "userName", label: "用户姓名" },
  { prop: "residueRestDays", label: "剩余可调休/轮休天数" },
  { prop: "restDays", label: "已调休/轮休天数" },
  { prop: "staffSignature", label: "员工签字" },
  { prop: "remarks", label: "备注" }
  // {prop: 'operate',label: '操作'},
])
// 初始化
const init = () => {}
// 表单刷新
const Refresh = () => {
  //用户数据概览
}

let dialogVisible = ref<boolean>(false) // 审核弹框
let tableDataRow = ref<any>({}) // 当前审核数据
interface RuleForm {
  reportingTime: string
}
const ruleForm = reactive<RuleForm>({
  reportingTime: ""
})

// 处理 同意和驳回 方法
const isAgreewithFn = async (type: number) => {
  console.log("submit!", ruleForm)
  if (type == 1) {
    // 确认
    if (!ruleForm.reportingTime) {
      ElMessage.error("请填写销假时间")
      return
    }
    staffWriteReportingTime({
      ...ruleForm,
      id: tableDataRow.value.id
    })
      .then((res) => {
        console.log(res)
        if (res.code == 200) {
          ElMessage("填写成功~")
          ruleForm.reportingTime = ""
          dialogVisible.value = false
          tabCombox.value.resetSearch()
        }
      })
      .catch((err) => {})
  } else {
    // 取消
    handleClose()
  }
}

// 添加销假时间
const examineFn = (type: string, row: any, Face = "") => {
  if (type == "reedit") {
    // 重新编辑
    if (row.leaveStatus == 6) {
      // 只有驳回后才能编辑
      tabCombox.value.handleUpdateFun(row)
    } else {
      ElMessage.error("当前状态无法编辑~")
    }
  } else {
    // 填写销假时间
    if (row.leaveStatus == 3) {
      dialogVisible.value = true
      tableDataRow.value = row
    } else {
      ElMessage.error("暂无到当前步骤~")
    }
  }
}
// × 掉弹框回调
const handleClose = () => {
  ElMessageBox.confirm(`确认不填写销假时间吗？`, `提示`, {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      dialogVisible.value = false
    })
    .catch(() => {})
}

// 搜索回调
const searchCallback = (search: any) => {}
const loading = ref<boolean>(false)
const gailan = ref<any>({})
const gethomeStatisticsStar = (obj: any = {}) => {
  // loading.value = true
  // gethomeStatistics(obj).then((res: any) => {
  //   gailan.value = res.data
  //   loading.value = false
  // })
}
</script>
<style scoped lang="scss">
.search-wrapper {
  margin: 0 auto;
  width: 98.5%;
  margin-top: 10px;
}
</style>
